<template>
    <div class="forgot-password-container">
      <h2>找回密码</h2>
      <p>请输入您的账号和邮箱，我们将发送重置密码的链接</p>
      
      <form @submit.prevent="handleForgotPassword">
        <div class="form-group">
          <label for="username">账号</label>
          <input type="text" id="username" v-model="username" placeholder="请输入账号" required>
        </div>
        
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" v-model="email" placeholder="请输入邮箱" required>
        </div>
        
        <div class="form-group">
          <label for="code">验证码</label>
          <div class="code-input-group">
            <input type="text" id="code" v-model="code" placeholder="请输入验证码" required>
            <button type="button" @click="sendCode" :disabled="countdown > 0">
              {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
            </button>
          </div>
        </div>
        
        <button type="submit">重置密码</button>
        
        <div class="login-link">
          想起密码了？<router-link to="/login">立即登录</router-link>
        </div>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        email: '',
        code: '',
        countdown: 0,
        timer: null
      }
    },
    methods: {
      async sendCode() {
        if (!this.username || !this.email) {
          alert('请先输入账号和邮箱');
          return;
        }
        
        try {
          // 模拟发送验证码请求
          await this.$axios.post('/api/send-code', {
            username: this.username,
            email: this.email
          });
          
          alert('验证码已发送，请查收邮箱');
          
          // 开始倒计时
          this.countdown = 60;
          this.timer = setInterval(() => {
            this.countdown--;
            if (this.countdown <= 0) {
              clearInterval(this.timer);
            }
          }, 1000);
        } catch (error) {
          console.error('发送验证码失败:', error);
          alert('发送验证码失败，请重试');
        }
      },
      
      async handleForgotPassword() {
        if (!this.code) {
          alert('请输入验证码');
          return;
        }
        
        try {
          // 模拟重置密码请求
          await this.$axios.post('/api/reset-password', {
            username: this.username,
            email: this.email,
            code: this.code
          });
          
          alert('密码重置成功，请使用新密码登录');
          this.$router.push('/login');
        } catch (error) {
          console.error('重置密码失败:', error);
          alert('重置密码失败，请检查信息是否正确');
        }
      }
    },
    beforeUnmount() {
      // 组件销毁前清除定时器
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
  }
  </script>
  
  <style scoped>
  .forgot-password-container {
    width: 350px;
    margin: 0 auto;
    padding: 40px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  h2 {
    color: #1890ff;
    margin-bottom: 10px;
  }
  
  p {
    color: #8c8c8c;
    margin-bottom: 30px;
  }
  
  .form-group {
    margin-bottom: 20px;
    text-align: left;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .code-input-group {
    display: flex;
    gap: 10px;
  }
  
  .code-input-group button {
    flex-shrink: 0;
    padding: 10px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .code-input-group button:disabled {
    background-color: #d9d9d9;
    cursor: not-allowed;
  }
  
  button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }
  
  button[type="submit"]:hover {
    background-color: #40a9ff;
  }
  
  .login-link {
    margin-top: 20px;
    color: #8c8c8c;
  }
  
  .login-link router-link {
    color: #1890ff;
    text-decoration: none;
  }
  </style>
      